var resizeTimer = 0;
var dirty = true;

$.templateLayoutShowOnReady();

function resizeChart( timeout )
{
    if( typeof( timeout ) == "undefined") timeout = 200;

    if( dirty == false ) return;

    refreshDelay = 5000;

    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function ()
    {
        testDiv = $( "#temperaturelinechart" );

        for( loop = 0; loop < 2 && testDiv.highcharts; loop++ )
        {
            if( 1 )
            {
                container = $("#temperaturedata");
                stats = $("#temperaturestats");
                graph = $("#temperaturelinechart");

                graphWidth = Math.round( container.innerWidth() - stats.outerWidth( true ) );
                graphHeight = 250;

                if( ( graphWidth  != graph.highcharts().chartWidth ) ||
                    ( graphHeight != graph.highcharts().chartHeight ) )
                {
                    graph.highcharts().setSize( graphWidth, graphHeight, false );
                    refreshDelay = 1;
                }
            }
             
            if( 1 )
            {
                for (i = 1; i <= 2; i++)
                {
                    container = $("#tap" + i.toString() + "details");
                    graph = $("#tap" + i.toString() + "beerremaining");
                    stats = $("#tap" + i.toString() + "stats");

                    graphWidth = Math.round( container.innerWidth() - stats.outerWidth( true ) );
                    graphHeight = Math.round( stats.innerHeight() );

                    if( ( graphWidth  != graph.highcharts().chartWidth ) ||
                        ( graphHeight != graph.highcharts().chartHeight ) )
                    {
                        graph.highcharts().setSize( graphWidth, graphHeight, false );
                        refreshDelay = 1;
                    }
                }
            }
            if( loop == 0 )
            {
                // set diry flag - we want the entire layout reflowed, but we dont want the resize code
                // to be triggeredagain.
                dirty = false;
                $.redoTemplateLayout();
            }
        }
        dirty = true;

        resizeChart(refreshDelay);
    }, timeout );
}

function createTemperatureHighchart()
{
    div = $( '#temperaturelinechart' );

    width = null;
    hight = null;

    t = typeof( div.highcharts() );

    if( t == "object" )
    {
        width = div.highcharts().chartWidth;
        height = div.highcharts().chartHeight;

        //console.log(" old chart: %d, %d", width, height );
    }

    $( '#temperaturelinechart' ).highcharts(
    {
        data:
        {
            table: document.getElementById( 'temperaturedatatable' )
        },
        chart:
        {
            type: 'spline',
            animation: false,
            backgroundColor: null,
        },
        title:
        {
            text: 'Temperature Over Time'
        },
        xAxis:
        {
            type: 'datetime'
        },
        yAxis:
        {
            allowDecimals: false,
            title:
            {
                text: ''
            }
        },
        plotOptions: {
            spline:
            {
                animation: false,
                fillOpacity: 0.2,
                marker:
                {
                    enabled: false
                }
            }
        },
        exporting:
        {
            enabled: false
        }
    } );

    if( width != null && height != null )
    {
        $( '#temperaturelinechart' ).highcharts().setSize( width, height );
        //console.log( "  setting size on new chart" );
    }

    //console.log( "chart created" );
}

function loadTemperatureData( delay )
{
    setTimeout( function ()
    {
        $( "#temperaturedatatableholder" ).load( "ajaxGetTemperature.php", function ()
        {
            setTimeout( function ()
            {
                createTemperatureHighchart();
                if ( delay < 5000 )
                {
                    resizeChart();
                }
                loadTemperatureData( 5000 );
            }, 200 );
        } );
    }, delay );
}

$(function ()
{
    // callback onresize for layout engine
    //$.resizeCallBack = resizeChart;

    //$("#clock").append('<div class="clock"><canvas class="CoolClock:classic"                ></canvas></div>');

    Highcharts.setOptions(
    {
        global:
            {
            useUTC: false
        }
    });

    if( 0 )
    {
        createTemperatureHighchart();
    }

    if( 0 )
    {
        for (i = 1; i <= 2; i++) {
            chartid = "#tap" + i.toString() + "beerremaining";
            pourtable = "tap" + i.toString() + "pourtable";

            $(chartid).highcharts(
            {
                data:
                {
                    table: document.getElementById(pourtable)
                },
                chart:
                {
                    type: 'area',
                    backgroundColor: "rgba( 0, 255, 255, 0.0 )",
                    plotBackgroundColor: "rgba( 255, 255, 0, 0.0 )",
                    animation: false,
                },
                title:
                {
                    text: null
                },
                legend:
                {
                    enabled: false,
                    backgroundColor: "rgba( 0, 255, 255, 0.0 )",
                },
                xAxis:
                {
                    type: 'datetime'

                },
                yAxis:
                {
                    max: 100,
                    min: 0,
                    allowDecimals: false,
                    title:
                    {
                        text: null
                    }
                },
                plotOptions:
                {
                    area:
                    {
                        animation: false,
                        fillOpacity: 0.2,
                        marker:
                        {
                            enabled: false
                        }
                    }
                },
                exporting:
                {
                    enabled: false
                }
            });
        }
    }

    $.setTemplateLayout( "global.css" );
    //resizeChart( 150 );
    //loadTemperatureData( 10000 );
});